<template> 
  <div class="app-container">
    <header-search class="g-w100 g-h100 colon mainSearchPanel">
      <el-row>
        <el-col :span="24" style="text-align: left">
          <p class="page-header-title">
            <i class="el-icon-right"></i>
            {{title}}
          </p>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-form ref="queryForm" :inline="true" label-width="80px">
        <el-form-item label="姓名">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.xm" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_xm" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.ssbm" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_ssbm" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工性质">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.ygxz" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_ygxz" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.xb" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_xb" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.mz" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_mz" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.zzmm" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_zzmm" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.zw" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_zw" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职称">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.zc" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_zc" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.xl" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_xl" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所学专业">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.sxzy" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_sxzy" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作序列">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.gzxl" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_gzxl" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人员状态">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.ryzt" style="width: 250px">
            <el-option
              v-for="({sjxdm, sjxmc}) in selectorData_ryzt" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="buttonArea">
          <el-button type="primary" icon="el-icon-search" @click="getListData"> 查询 </el-button>
          <el-button icon="el-icon-refresh" class="commonBtn" @click="resetQuery"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </header-search>

    <page-panel-new class="mainListPanel"  :header-title="title">
      <el-row class="mbBottom">
        <el-col :span="16">
          <el-button type="primary" @click="doAdd"> 新增 </el-button>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <el-button type="primary" @click="doExportExcel"> 导出 </el-button>
        </el-col>
      </el-row>
      <el-table ref="table-main" :data="data" :height="tableHeight" :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px 0' }" header-cell-class-name="table_header"
        highlight-current-row
        :cell-style="{ padding: '2px', 'text-align': 'center' }" style="width: 100%; height: 100%">
        <el-table-column label="序号" align="right" prop="id" width="50">
          <template slot-scope="scope">
            {{ scope.$index + (queryParams.pageSize * (queryParams.pageNum-1)) + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="员工编号" align="left" prop="ygbh" width="200" show-overflow-tooltip  />
        <el-table-column label="姓名" align="left" prop="xm" width="150" show-overflow-tooltip  />
        <el-table-column label="性别" align="left" prop="xb" width="80" show-overflow-tooltip  />
        <el-table-column label="民族" align="left" prop="mz" width="120" show-overflow-tooltip  />
        <el-table-column label="出生日期" align="center" prop="csrq" width="100" show-overflow-tooltip  />
        <el-table-column label="政治面貌" align="left" prop="zzmm" width="100" show-overflow-tooltip  />
        <el-table-column label="籍贯" align="left" prop="bz" width="150" show-overflow-tooltip  />
        <el-table-column label="所属部门" align="left" prop="ssbm" width="150" show-overflow-tooltip  />
        <el-table-column label="人员状态" align="left" prop="ryzt" width="100" show-overflow-tooltip  />
        <el-table-column label="工作序列" align="left" prop="gzxl" width="100" show-overflow-tooltip  />
        <el-table-column label="联系电话" align="left" prop="lxdh" width="100" show-overflow-tooltip  />
        <el-table-column label="职务" align="left" prop="zw" width="150" show-overflow-tooltip  />
        <el-table-column label="职称" align="left" prop="zc" width="100" show-overflow-tooltip  />
        <el-table-column label="学历" align="left" prop="xl" width="100" show-overflow-tooltip  />
        <el-table-column label="毕业院校" align="left" prop="byyx" width="150" show-overflow-tooltip  />
        <el-table-column label="所学专业" align="left" prop="sxzy" width="100" show-overflow-tooltip  />
        <el-table-column label="备注" align="left" prop="bz" width="200" show-overflow-tooltip  />
        <el-table-column label="操作" align="center" class-name="small-padding" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="delbutton" @click="doUpdate(scope.row, scope.$index)"> 修改 </el-button>
            <el-button type="text" class="delbutton" @click="doDelete(scope.row, scope.$index)"> 删除 </el-button>
            <el-button type="text" @click="doView(scope.row, scope.$index)"> 查看 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="pagination.total" class="mainListPagination" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getListData" />
    </page-panel-new>


    <el-dialog :title="dialogTitle" :visible.sync="OpType.Open" width="86%" append-to-body>
      <div class="el-dialog-div">
        <el-form ref="form-main" :model="formData" :rules="rules" :validate-on-rule-change=false label-width="90px" :disabled="formDisable">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="员工编号" prop="ygbh">
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.ygbh" style="width: 99%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="姓名" prop="ygbh">
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.xm" style="width: 99%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别" prop="xb">
                <el-radio v-model="formData.xb" label="男">男</el-radio>
                <el-radio v-model="formData.xb" label="女">女</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="民族" prop="mz">
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.mz" style="width: 99%"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="出生日期" prop="csrq">
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.csrq" style="width: 99%"/>
              </el-form-item> 
            </el-col>
            <el-col :span="6">
              <el-form-item label="政治面貌" prop="zzmm">
                <!--visible-change、clear这两个事件主要处理 select失去焦点校验bug, blur事件允许自己输入不在下拉中的值-->
                <el-select filterable clearable :placeholder="showPlaceHolder?'请选择或输入':''" style="width: 99%"
                  v-model="formData.zzmm" @visible-change="handleSelectVisibleChange($event, 'zzmm')" 
                  @clear="handleSelectClear('zzmm')" @blur="handleSelectBlur($event, 'zzmm')"> 
                  <el-option
                    v-for="({sjxdm, sjxmc}) in selectorData_in_zzmm" :key="sjxdm" :label="sjxmc" :value="sjxdm">
                  </el-option>
                </el-select>
              </el-form-item> 
            </el-col>
            <el-col :span="6">
              <el-form-item label="籍贯" prop="jg">
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.jg" style="width: 99%"/>
              </el-form-item> 
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属部门" prop="ssbm">
                <!--visible-change、clear这两个事件主要处理 select失去焦点校验bug, blur事件允许自己输入不在下拉中的值-->
                <el-select filterable clearable :placeholder="showPlaceHolder?'请选择或输入':''" style="width: 99%"
                  v-model="formData.ssbm" @visible-change="handleSelectVisibleChange($event, 'ssbm')" 
                  @clear="handleSelectClear('ssbm')"  @blur="handleSelectBlur($event, 'ssbm')"> 
                  <el-option
                    v-for="({sjxdm, sjxmc}) in selectorData_in_ssbm" :key="sjxdm" :label="sjxmc" :value="sjxdm">
                  </el-option>
                </el-select>
              </el-form-item> 
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="联系电话" prop="lxdh">
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.lxdh" style="width: 99%"/>
              </el-form-item> 
            </el-col>
            <el-col :span="6">
              <el-form-item label="工作序列" prop="gzxl">
                <!--visible-change、clear这两个事件主要处理 select失去焦点校验bug, blur事件允许自己输入不在下拉中的值-->
                <el-select filterable clearable :placeholder="showPlaceHolder?'请选择或输入':''" style="width: 99%"
                v-model="formData.gzxl" @visible-change="handleSelectVisibleChange($event, 'gzxl')" 
                  @clear="handleSelectClear('gzxl')" @blur="handleSelectBlur($event, 'gzxl')"> 
                  <el-option
                    v-for="({sjxdm, sjxmc}) in selectorData_in_gzxl" :key="sjxdm" :label="sjxmc" :value="sjxdm">
                  </el-option>
                </el-select>
              </el-form-item> 
            </el-col>
            <el-col :span="6">
              <el-form-item label="职务" prop="zw">
                <!--visible-change、clear这两个事件主要处理 select失去焦点校验bug, blur事件允许自己输入不在下拉中的值-->
                <el-select filterable clearable multiple :placeholder="showPlaceHolder?'请选择':''" style="width: 99%"
                v-model="formData.zw" @visible-change="handleSelectVisibleChange($event, 'zw')" 
                  @clear="handleSelectClear('zw')" @blur="handleSelectBlur($event, 'zw')"> 
                  <el-option
                    v-for="({sjxdm, sjxmc}) in selectorData_in_zw" :key="sjxdm" :label="sjxmc" :value="sjxdm">
                  </el-option>
                </el-select>
              </el-form-item> 
            </el-col>
            <el-col :span="6">
              <el-form-item label="职称" prop="zc">
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.zc" style="width: 99%"/>
              </el-form-item> 
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="学历" prop="xl">
                <!--visible-change、clear这两个事件主要处理 select失去焦点校验bug, blur事件允许自己输入不在下拉中的值-->
                <el-select filterable clearable :placeholder="showPlaceHolder?'请选择或输入':''" style="width: 99%"
                v-model="formData.xl" @visible-change="handleSelectVisibleChange($event, 'xl')" 
                  @clear="handleSelectClear('xl')" @blur="handleSelectBlur($event, 'xl')"> 
                  <el-option
                    v-for="({sjxdm, sjxmc}) in selectorData_in_xl" :key="sjxdm" :label="sjxmc" :value="sjxdm">
                  </el-option>
                </el-select>
              </el-form-item>    
            </el-col>
            <el-col :span="6">
              <el-form-item label="毕业院校" prop="byyx">
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.byyx" style="width: 99%"/>
              </el-form-item> 
            </el-col>
            <el-col :span="6">
              <el-form-item label="毕业时间" prop="bysj">
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.bysj" style="width: 99%"/>
              </el-form-item> 
            </el-col>
            <el-col :span="6">
              <el-form-item label="所学专业" prop="sxzy">
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.sxzy" style="width: 99%"/>
              </el-form-item> 
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="参加工作时间" prop="cjgzsj" label-width="100px" >
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.cjgzsj" style="width: 99%"/>
              </el-form-item> 
            </el-col>    
            <el-col :span="6">
              <el-form-item label="开始从事检测工作时间" prop="kscsjcgzsj" label-width="160px" >
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.kscsjcgzsj" style="width: 99%"/>
              </el-form-item> 
            </el-col>   
            <el-col :span="6">
              <el-form-item label="员工性质" prop="ygxz">
                <!--visible-change、clear这两个事件主要处理 select失去焦点校验bug, blur事件允许自己输入不在下拉中的值-->
                <el-select filterable clearable :placeholder="showPlaceHolder?'请选择或输入':''" style="width: 99%"
                v-model="formData.ygxz" @visible-change="handleSelectVisibleChange($event, 'ygxz')" 
                  @clear="handleSelectClear('ygxz')" @blur="handleSelectBlur($event, 'ygxz')"> 
                  <el-option
                    v-for="({sjxdm, sjxmc}) in selectorData_in_ygxz" :key="sjxdm" :label="sjxmc" :value="sjxdm">
                  </el-option>
                </el-select>
              </el-form-item>    
            </el-col>   
            <el-col :span="6">
              <el-form-item label="身份证号码" prop="sfzhm" >
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.sfzhm" style="width: 99%"/>
              </el-form-item> 
            </el-col>      
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="工装尺寸" prop="gzcc" >
                <el-input :placeholder="showPlaceHolder?'请输入':''" v-model="formData.gzcc" style="width: 99%"/>
              </el-form-item> 
            </el-col>  
            <el-col :span="6">
              <el-form-item label="实验系统用户名" prop="yhm" label-width="120px">
                <!--visible-change、clear这两个事件主要处理 select失去焦点校验bug, blur事件允许自己输入不在下拉中的值-->
                <el-select filterable clearable :placeholder="showPlaceHolder?'请选择或输入':''" style="width: 99%"
                v-model="formData.yhm" @visible-change="handleSelectVisibleChange($event, 'yhm')" 
                  @clear="handleSelectClear('yhm')" @blur="handleSelectBlur($event, 'yhm')"> 
                  <el-option
                    v-for="({sjxdm, sjxmc}) in selectorData_in_yhm" :key="sjxdm" :label="sjxmc" :value="sjxdm">
                  </el-option>
                </el-select>
              </el-form-item>    
            </el-col>    
            <el-col :span="6">
              <el-form-item label="人员状态" prop="ryzt">
                <!--visible-change、clear这两个事件主要处理 select失去焦点校验bug, blur事件允许自己输入不在下拉中的值-->
                <el-select filterable clearable :placeholder="showPlaceHolder?'请选择或输入':''" style="width: 99%"
                v-model="formData.ryzt" @visible-change="handleSelectVisibleChange($event, 'ryzt')" 
                  @clear="handleSelectClear('ryzt')" @blur="handleSelectBlur($event, 'ryzt')"> 
                  <el-option
                    v-for="({sjxdm, sjxmc}) in selectorData_in_ryzt" :key="sjxdm" :label="sjxmc" :value="sjxdm">
                  </el-option>
                </el-select>
              </el-form-item>    
            </el-col>        
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="照片" prop="zp">
                <el-upload ref="upload_zp" :limit="1" accept=".bmp,.jpg,.jpeg,.png,.gif" 
                  action="" :style="{width: '90%',height:'200px'}" v-show="upload.uploadVisible_zp"
                  :auto-upload="false" drag :file-list="upload.uploadFiles_zp" name="upfile_zp"
                  :on-change="handleUploadChange_zp" :on-remove="handleUploadRemove_zp" :before-remove="handleUploadBeforeRemove_zp">
                  <i class="el-icon-upload" />
                  <div class="el-upload__text">只能上传一个图片文件，请将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
                <ul>
                  <li v-for="(file, idx) in upload.uploadFiles_zp" :key="idx" v-show="upload.displayVisible_zp">
                    <span  @click.stop="doDownloadFile({classid:file.classid, fileid:file.fileid})">
                      <el-link href="#" type="primary">{{ file.name }}</el-link>
                    </span>
                  </li>
                </ul>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业证书扫描件" prop="byzs" label-width="150px">
                <el-upload ref="upload_byzs" :limit="1" accept=".bmp,.jpg,.jpeg,.png,.gif" 
                  action="" :style="{width: '90%',height:'200px'}" v-show="upload.uploadVisible_byzs"
                  :auto-upload="false" drag :file-list="upload.uploadFiles_byzs" name="upfile_byzs"
                  :on-change="handleUploadChange_byzs" :on-remove="handleUploadRemove_byzs" :before-remove="handleUploadBeforeRemove_byzs">
                  <i class="el-icon-upload" />
                  <div class="el-upload__text">只能上传一个图片文件，请将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
                <ul>
                  <li v-for="(file, idx) in upload.uploadFiles_byzs" :key="idx" v-show="upload.displayVisible_byzs">
                    <span  @click.stop="doDownloadFile({classid:file.classid, fileid:file.fileid})">
                      <el-link href="#" type="primary">{{ file.name }}</el-link>
                    </span>
                  </li>
                </ul>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="18">
              <el-form-item label="备注" prop="bz">
                <el-input v-model="formData.bz" :placeholder="showPlaceHolder?'请输入':''" type="textarea" :rows="4"  style="width: 99%"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="!formDisable" type="primary" @click="doSubmit"> 保存 </el-button>
        <el-button class="cancelBtn" @click="doClose"> 关 闭 </el-button>
        <el-button class="cancelBtn" @click="test"> 测试 </el-button>
      </div>
    </el-dialog>

  </div>

</template>
<script lang="ts">
import Vue from 'vue'
import Trend from '@/components/mainEntrance/trend/index.vue'
import { prefix } from '@/config/global'
import {
  getListData,
  getSelectorData,
  uploadFile,
  submit_delfile_zp,
  submit_delfile_byzs,

} from '@/api/syfxxtApi/ygxxgl/ygjbxx/api.js'
import {
  CONTRACT_STATUS,
  CONTRACT_STATUS_OPTIONS,
  CONTRACT_TYPES,
  CONTRACT_PAYMENT_TYPES,
} from '@/constants'
import dayjs from 'dayjs'


const FORM_INITIALDATA = { //录入Form初始化数据
      __rowindex:'',
      optype:'',
      id: '',  
      ygbh: '',  
      xm: '',  
      xb: '',  
      mz: '',  
      csrq: '',  
      zzmm: '',  
      jg: '',  
      ssbm: '',  
      ygxz: '',  
      sfzhm: '',  
      zc: '',  
      xl: '',  
      zw: '',  
      cjgzsj: '',  
      kscsjcgzsj: '',  
      byyx: '',  
      bysj: '',  
      sxzy: '',  
      grjl: '',  
      bz: '',  
      fileid_zp: '',  
      filename_zp: '',  
      classid_zp: '',  
      fileid_byzs: '',  
      filename_byzs: '',  
      classid_byzs: '',  
      s_cjr: '',  
      s_zhxgr: '',  
      gzxl: '',  
      gzcc: '',  
      yhm: '',  
      ryzt: '',  
      lxdh: '',
    };

const QUERY_PARAMS_INITIALDATA = { //查询参数初始化数据
    pageNum: 1,
    pageSize: 20,
    xm:'',
    ssbm:'',
    ygxz:'',
    xb: '',
    mz: '',
    zzmm: '',
    zw: '',
    zc: '',
    xl: '',
    sxzy: '',
    gzxl: '',
    ryzt: '',
  };


export default Vue.extend({
  name: 'Ygxxgl-Ygjbxx',
  data() {
    return {
      title: '员工基本信息',
      dialogTitle: '',
      thCss: 'custom-th-class',
      tableHeight: window.innerHeight - 320,
      CONTRACT_STATUS,
      CONTRACT_STATUS_OPTIONS,
      CONTRACT_TYPES,
      CONTRACT_PAYMENT_TYPES,
      prefix,
      dataLoading: false,
      data: [], //主表格数据
      selectorData_xm: [],//查询选择器下拉数据
      selectorData_ssbm: [], //查询选择器下拉数据
      selectorData_ygxz: [], //查询选择器下拉数据
      selectorData_xb: [], //查询选择器下拉数据
      selectorData_mz: [], //查询选择器下拉数据
      selectorData_zzmm: [], //查询选择器下拉数据
      selectorData_zw: [], //查询选择器下拉数据
      selectorData_zc: [], //查询选择器下拉数据
      selectorData_xl: [], //查询选择器下拉数据
      selectorData_sxzy: [], //查询选择器下拉数据
      selectorData_gzxl: [], //查询选择器下拉数据
      selectorData_ryzt: [], //查询选择器下拉数据
      selectorData_in_xb: [], //录入选择器下拉数据
      selectorData_in_zzmm: [], //录入选择器下拉数据
      selectorData_in_ssbm: [], //录入选择器下拉数据
      selectorData_in_ygxz: [], //录入选择器下拉数据
      selectorData_in_xl: [], //录入选择器下拉数据
      selectorData_in_gzxl: [], //录入选择器下拉数据
      selectorData_in_ryzt: [], //录入选择器下拉数据
      selectorData_in_zw: [], //录入选择器下拉数据
      selectorData_in_yhm: [], //录入选择器下拉数据
      OpType: {
        Open: false,
        Delete: false,
        OpenFJ: false,
        Export: false,
      },
      selectedRowKeys: [],
      value: 'first',
      formData: { ...FORM_INITIALDATA }, //录入Form数据
      formDisable: false, 
      showPlaceHolder: true, 
      queryParams: {...QUERY_PARAMS_INITIALDATA}, //查询参数
      rules: { //录入验证规则
        ygbh: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
        xm: [{ required: true, message: "请输入姓名。", trigger: "blur" }],
        xb: [{ required: true, message: "请选择性别。", trigger: "blur" }],
        mz: [{ required: true, message: "请输入民族。", trigger: "blur" }],
        yhm: [{ required: true, message: "请选择实验系统用户名。", trigger: "blur" }],
      },
      rowKey: 'id',
      tableLayout: 'fixed',
      verticalAlign: 'top',
      hover: true,
      pagination: { //翻页配置
        defaultPageSize: 20,
        total: 0,
        defaultCurrent: 1,
      },
      upload: {  //上传配置
        uploadVisible: false, //上传项是否显示，在查看时不显示
        uploadFiles_zp: [],
        uploadFiles_byzs: [],
        uploadVisible_zp: false,
        uploadVisible_byzs: false,
        displayVisible_zp: false,
        displayVisible_byzs: false,
      },
      exportVisible: false,
      imgSrc: ''
    }
  },
  computed: {

  },
  mounted() {
    this.getSelectorData_xm();
    this.getSelectorData_ssbm();
    this.getSelectorData_ygxz();
    this.getSelectorData_xb();
    this.getSelectorData_mz();
    this.getSelectorData_zzmm();
    this.getSelectorData_zw();
    this.getSelectorData_zc();
    this.getSelectorData_xl();
    this.getSelectorData_sxzy();
    this.getSelectorData_gzxl();
    this.getSelectorData_ryzt();
    this.getSelectorData_in_xb();
    this.getSelectorData_in_zzmm();
    this.getSelectorData_in_ssbm();
    this.getSelectorData_in_ygxz();
    this.getSelectorData_in_xl();
    this.getSelectorData_in_gzxl();
    this.getSelectorData_in_ryzt();
    this.getSelectorData_in_zw();
    this.getSelectorData_in_yhm();
    this.getListData();
    this.doLayout();
  },
  methods: {
    // 布局计算
    doLayout() {
      this.$nextTick(()=>{
        var winHeight = 0;
        if (window.innerHeight) {
            winHeight = window.innerHeight;
        } else if (document.body && document.body.clientHeight) {
            winHeight = document.body.clientHeight;
        } 
        else if (document.documentElement && document.documentElement.clientHeight) {
            winHeight = document.documentElement.clientHeight;
        }
        
        var queryPanelHeight = this.$el.querySelector('.mainSearchPanel').offsetHeight;
        var mainPanelHeight = winHeight - queryPanelHeight - 150;
        var paginationHeight = this.$el.querySelector('.mainListPagination').offsetHeight;
        this.$el.querySelector('.mainListPanel').style.height = mainPanelHeight+ 'px';
        this.tableHeight = mainPanelHeight - 130;
      })
    },
    //获取主表格查询数据
    getListData() {
      try {
        this.dataLoading = true  
        const param = {
          start: (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
          limit: this.queryParams.pageSize,
          sel_xm: this.queryParams.xm,
          sel_ssbm: this.queryParams.ssbm,
          sel_ygxz: this.queryParams.ygxz,
          sel_xb: this.queryParams.xb,
          sel_mz: this.queryParams.mz,
          sel_zzmm: this.queryParams.zzmm,
          sel_zw: this.queryParams.zw,
          sel_zc: this.queryParams.zc,
          sel_xl: this.queryParams.xl,
          sel_sxzy: this.queryParams.sxzy,
          sel_gzxl: this.queryParams.gzxl,
          sel_ryzt: this.queryParams.ryzt,
        };
        getListData(param).then((res) => {
          if (res.success) {
            this.data = res.rows;
            this.pagination.total = res.total;
            this.exportDisabled = this.data.length == 0;
            this.queryParams.commitedParam = param;
          } else {
            this.data = []
            this.$message.error({ content: '请重新搜索!', placement: 'center' })
          }
          this.doLayout();
        })
      } catch (error) {
        this.dataLoading = false;
        console.warn('接口提示', error);
        this.doLayout();
      }
    },
    //获取选择器数据
    getSelectorData_xm() {
      try {
        const param = {};
        getSelectorData("xm", param).then((res) => {
          if (res.success) {
            this.selectorData_xm = res.rows;
          } else {
            this.selectorData_xm = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_ssbm() {
      try {
        const param = {};
        getSelectorData("ssbm", param).then((res) => {
          if (res.success) {
            this.selectorData_ssbm = res.rows;
          } else {
            this.selectorData_ssbm = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_ygxz() {
      try {
        const param = {};
        getSelectorData("xgxz", param).then((res) => {
          if (res.success) {
            this.selectorData_ygxz = res.rows;
          } else {
            this.selectorData_ygxz = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_xb() {
      try {
        const param = {};
        getSelectorData("xb", param).then((res) => {
          if (res.success) {
            this.selectorData_xb = res.rows;
          } else {
            this.selectorData_xb = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_mz() {
      try {
        const param = {};
        getSelectorData("mz", param).then((res) => {
          if (res.success) {
            this.selectorData_mz = res.rows;
          } else {
            this.selectorData_mz = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_zzmm() {
      try {
        const param = {};
        getSelectorData("zzmm", param).then((res) => {
          if (res.success) {
            this.selectorData_zzmm = res.rows;
          } else {
            this.selectorData_zzmm = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_zw() {
      try {
        const param = {};
        getSelectorData("zw", param).then((res) => {
          if (res.success) {
            this.selectorData_zw = res.rows;
          } else {
            this.selectorData_zw = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_zc() {
      try {
        const param = {};
        getSelectorData("zc", param).then((res) => {
          if (res.success) {
            this.selectorData_zc = res.rows;
          } else {
            this.selectorData_zc = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_xl() {
      try {
        const param = {};
        getSelectorData("xl", param).then((res) => {
          if (res.success) {
            this.selectorData_xl = res.rows;
          } else {
            this.selectorData_xl = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_sxzy() {
      try {
        const param = {};
        getSelectorData("sxzy", param).then((res) => {
          if (res.success) {
            this.selectorData_sxzy = res.rows;
          } else {
            this.selectorData_sxzy = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_gzxl() {
      try {
        const param = {};
        getSelectorData("gzxl", param).then((res) => {
          if (res.success) {
            this.selectorData_gzxl = res.rows;
          } else {
            this.selectorData_gzxl = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取选择器数据
    getSelectorData_ryzt() {
      try {
        const param = {};
        getSelectorData("ryzt", param).then((res) => {
          if (res.success) {
            this.selectorData_ryzt = res.rows;
          } else {
            this.selectorData_ryzt = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取录入选择器数据
    getSelectorData_in_xb() {
      try {
        const param = {};
        getSelectorData("in_xb", param).then((res) => {
          if (res.success) {
            this.selectorData_in_zscqlb = res.rows;
          } else {
            this.selectorData_in_zscqlb = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取录入选择器数据
    getSelectorData_in_zzmm() {
      try {
        const param = {};
        getSelectorData("in_zzmm", param).then((res) => {
          if (res.success) {
            this.selectorData_in_zscqlb = res.rows;
          } else {
            this.selectorData_in_zscqlb = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取录入选择器数据
    getSelectorData_in_ssbm() {
      try {
        const param = {};
        getSelectorData("in_ssbm", param).then((res) => {
          if (res.success) {
            this.selectorData_in_ssbm = res.rows;
          } else {
            this.selectorData_in_ssbm = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取录入选择器数据
    getSelectorData_in_ygxz() {
      try {
        const param = {};
        getSelectorData("in_ygxz", param).then((res) => {
          if (res.success) {
            this.selectorData_in_ygxz = res.rows;
          } else {
            this.selectorData_in_ygxz = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取录入选择器数据
    getSelectorData_in_xl() {
      try {
        const param = {};
        getSelectorData("in_xl", param).then((res) => {
          if (res.success) {
            this.selectorData_in_xl = res.rows;
          } else {
            this.selectorData_in_xl = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取录入选择器数据
    getSelectorData_in_gzxl() {
      try {
        const param = {};
        getSelectorData("in_gzxl", param).then((res) => {
          if (res.success) {
            this.selectorData_in_gzxl = res.rows;
          } else {
            this.selectorData_in_gzxl = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取录入选择器数据
    getSelectorData_in_ryzt() {
      try {
        const param = {};
        getSelectorData("in_ryzt", param).then((res) => {
          if (res.success) {
            this.selectorData_in_ryzt = res.rows;
          } else {
            this.selectorData_in_ryzt = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取录入选择器数据
    getSelectorData_in_zw() {
      try {
        const param = {};
        getSelectorData("in_zw", param).then((res) => {
          if (res.success) {
            this.selectorData_in_zw = res.rows;
          } else {
            this.selectorData_in_zw = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    // 获取录入选择器数据
    getSelectorData_in_yhm() {
      try {
        const param = {};
        getSelectorData("in_yhm", param).then((res) => {
          if (res.success) {
            this.selectorData_in_yhm = res.rows;
          } else {
            this.selectorData_in_yhm = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    //处理新增按钮事件
    doAdd() {
      this.OpType.Open = true;
      this.$nextTick(()=>{
        this.formDisable = false;
        this.showPlaceHolder = true;
        this.formData = { ...FORM_INITIALDATA };
        this.formData.optype = 'add';
        this.dialogTitle = this.title + ' >> 新增';
        //this.$refs['form-main'].resetFields();
        this.upload.uploadFiles_zp = [];
        this.upload.uploadFiles_byzs = [];
        this.upload.uploadVisible_zp = true;
        this.upload.uploadVisible_byzs = true;
        this.upload.displayVisible_zp = false;
        this.upload.displayVisible_byzs = false;
      });
    },
    //处理修改按钮事件
    doUpdate(row, rowindex) {
      this.OpType.Open = true;
      
      this.$nextTick(()=>{
        this.formDisable = false;
        this.showPlaceHolder = true;
        this.$refs['table-main'].setCurrentRow(row);
        this.formData = {...row};
        this.formData.optype = 'update';
        this.formData.__rowindex = rowindex;
        this.dialogTitle = this.title + ' >> 修改';
        
        const param = {
            start: 0,
            limit: 100,
            sel_zscqid: this.formData.id,
          };
          getListData_fj(param).then((res) => {
            if (res.success) {
              this.upload.uploadFiles = res.rows;
              this.upload.uploadFiles.forEach(file => {
                file.name = file.filename;
                file.status = 'success';
              });
              this.upload.uploadVisible = true;
              this.upload.fileListVisible = false;
              this.OpType.Open = true;
              this.formDisable = false;
            } else {
              this.data = []
              this.$message.error({ content: '请重新搜索!', placement: 'center' })
            }
          })
        });
      
    },
    //处理删除按钮事件
    doDelete(row, rowindex) {
      return this.$modal.confirm("是否确认删除该条数据？")
      .then(() => {
        submit_delete({ id: row.id })
          .then((res) => {
            if (res.success) {
              this.data.splice(rowindex, 1);
              this.$message.success({ content: '删除成功!', placement: 'center' })
            } else {
              this.$message.error({ content: '删除失败!', placement: 'center' })
            }
            this.getSelectorData_zscqlb();
            this.getSelectorData_zscqmc();
            this.getSelectorData_in_zscqlb();
          })
          .catch(() => { 
            this.$message.error({ content: '删除失败!', placement: 'center' })
          });
      })
      .catch(() => { 
      });
    },
    //处理查看按钮事件
    doView(row, rowindex) {
      this.OpType.Open = true;
      this.$nextTick(()=>{
        this.formDisable = true;
        this.showPlaceHolder = false;
        this.$refs['table-main'].setCurrentRow(row);
        this.formData = {...row};
        this.formData.__rowindex = rowindex;
        this.dialogTitle = this.title + ' >> 查看';
        this.upload.uploadVisible = false;
      });
    },
    //处理查看附件按钮事件
    doViewFJ(row, rowindex) {
      this.$refs['table-main'].setCurrentRow(row);
      const param = {
          start: 0,
          limit: 100,
          sel_zscqid: row.id,
        };
        getListData_fj(param).then((res) => {
          if (res.success) {
            this.upload.uploadFiles = res.rows;
            this.upload.uploadFiles.forEach(file => {
              file.name = file.filename;
              file.status = 'success';
            });
            if (this.upload.uploadFiles.length > 0) {
              this.OpType.OpenFJ = true;
            } else {
              this.$message.info({ content: '无附件!', placement: 'center' })
            }
            
          } else {
            this.$message.error({ content: '下载附件失败!', placement: 'center' })
          }
        });
    },
    //处理导出按钮事件
    doExportExcel() {
      var params = {...this.queryParams.commitedParam};
      for (let key in params) {
        if (/^sel_/.test(key)) {
          var new_key = key.replace(/^sel_/, 'p_');
          params[new_key] = params[key];
        }
      }
      try {
        if (!this.queryParams.commitedParam) {
          this.$message.info({ content: '请先查询数据!', placement: 'center' })
        }
        const filename = this.title + '-' + dayjs().format('YYYYMMDDHHmmssSSS') + '.xls';
        exportExcel(this.download, params, filename);
      } catch (error) {
      }
    },
    //处理下载附件按钮事件
    doDownloadFile(param) {
      try {
        return downloadFile(param);
      } catch (error) {
      }
    },
    //处理保存按钮事件
    doSubmit() {
      this.$refs['form-main'].validate((valid) => {
        if (valid) {
          var _data = {...this.formData};

          var _submitData = new FormData();
          for (let key in _data) {
            if (_data[key] && _data[key] instanceof Date) {
              _data[key] = dayjs(_data[key]).format('YYYY-MM-DD');
            }
            _submitData.append(key, _data[key]);
          }
          var _fileList = [];
          this.upload.uploadFiles.forEach(file => {
            if (file.status == 'ready' && file.minioID) {
              _fileList.push(file);
            }
          });
          _submitData.append("fileList", JSON.stringify(_fileList));         
          submit(_submitData)
          .then((res) => {
            if (res.success) {
              if (this.formData.optype == 'add') {
                _data.id = res.id;
                this.data.unshift(_data);
                this.$refs['table-main'].setCurrentRow(this.data[0]);
              } else {
                this.data.splice(_data.__rowindex, 1, _data);
              }
              this.OpType.AddOrUpdate = false;
              this.$message.success({ content: '保存成功!', placement: 'center' })
              this.getSelectorData_zscqlb();
              this.getSelectorData_zscqmc();
              this.getSelectorData_in_zscqlb();
              this.OpType.Open = false;
            } else {
              this.$message.error({ content: '保存失败!', placement: 'center' })
            }
          })
          .catch(() => { 
            this.$message.error({ content: '保存失败!', placement: 'center' })
          });
        }
      });
    },
    //处理关闭事件
    doClose() {
      this.OpType.Open = false;
    },
    //处理查看附件按钮关闭事件
    doCloseFJ() {
      this.OpType.OpenFJ = false;
    },
    //查询参数重置按钮事件
    resetQuery() {
      this.queryParams = {...QUERY_PARAMS_INITIALDATA};
    },
    //翻页事件
    handlePageChange(pageInfo) {
      this.getListData()
      // this.pagination.defaultCurrent = pageInfo.current;
    },
    //录入Select下拉列表显示改变事件
    handleSelectVisibleChange(v, r) {
      this.$refs['form-main'].validateField(r);
    },
    //录入Select清除事件
    handleSelectClear(r) {
      this.$refs['form-main'].validateField(r);
    },
    //录入失去焦点事件
    handleSelectBlur(e, r) {
      this.formData[r] = e.target.value;
    },
    //上传文件改变事件
    handleUploadChange(file, filelist) {
      var _fileData = new FormData();
      _fileData.append("bizPath", "syfxxt/khfw");
      _fileData.append("uploadType", "minio");
      _fileData.append("file", file.raw, file.name);
      uploadFile(_fileData).then((res) => {
        if (res.data.code === 200) {
          file.minioID = res.data.data.split(":")[0];
          file.filename = file.name;
          this.upload.uploadFiles = filelist;
        } else {
          this.$message.error({ content: '上传失败!', placement: 'center' })
          filelist.splice(filelist.indexOf(file), 1);
          this.upload.uploadFiles = filelist;
        }
      })
      .catch(() => { 
        this.$message.error({ content: '上传失败!', placement: 'center' });
        filelist.splice(filelist.indexOf(file), 1);
        this.upload.uploadFiles = filelist;
      });
    },
    //上传文件删除前事件
    handleUploadBeforeRemove(file, filelist) {
      if (file.fileid && file.fjid) {
        return this.$modal.confirm("该文件已上传，确认删除该文件？");
      } else {
        return true;
      }
    },
    //上传文件删除事件
    handleUploadRemove(file, filelist) {
      this.upload.uploadFiles = filelist;

      if (file.fileid && file.fjid) {
        submit_delfile_fj({ fileid: file.fileid, fjid: file.fjid, zscqid: file.zscqid})
        .then((res) => {
          if (res.success) {
            this.$message.success({ content: '删除成功!', placement: 'center' })
          } else {
            this.$message.error({ content: '删除失败!', placement: 'center' })
          }
        })
        .catch(() => { 
          this.$message.error({ content: '删除失败!', placement: 'center' })
        });
      }
    },

        //上传文件改变事件
    handleUploadChange_zp(file, filelist) {
      var _fileData = new FormData();
      _fileData.append("bizPath", "syfxxt/khfw");
      _fileData.append("uploadType", "minio");
      _fileData.append("file", file.raw, file.name);
      uploadFile(_fileData).then((res) => {
        if (res.data.code === 200) {
          file.minioID = res.data.data.split(":")[0];
          file.filename = file.name;
          this.upload.uploadFiles_zp = filelist;
        } else {
          this.$message.error({ content: '上传失败!', placement: 'center' })
          filelist.splice(filelist.indexOf(file), 1);
          this.upload.uploadFiles_zp = filelist;
        }
      })
      .catch(() => { 
        this.$message.error({ content: '上传失败!', placement: 'center' });
        filelist.splice(filelist.indexOf(file), 1);
        this.upload["uploadFiles_" + name] = filelist;
      });
    },
    //上传文件删除前事件
    handleUploadBeforeRemove_zp(file, filelist) {
      if (file.fileid && file.fjid) {
        return this.$modal.confirm("该文件已上传，确认删除该文件？");
      } else {
        return true;
      }
    },
    //上传文件删除事件
    handleUploadRemove_zp(file, filelist) {
      this.upload.uploadFiles = filelist;

      if (file.fileid && file.fjid) {
        submit_delfile_zp({ fileid: file.fileid, id: file.id})
        .then((res) => {
          if (res.success) {
            this.$message.success({ content: '删除成功!', placement: 'center' })
          } else {
            this.$message.error({ content: '删除失败!', placement: 'center' })
          }
        })
        .catch(() => { 
          this.$message.error({ content: '删除失败!', placement: 'center' })
        });
      }
    },

    //上传文件改变事件
    handleUploadChange_byzs(file, filelist) {
      var _fileData = new FormData();
      _fileData.append("bizPath", "syfxxt/khfw");
      _fileData.append("uploadType", "minio");
      _fileData.append("file", file.raw, file.name);
      uploadFile(_fileData).then((res) => {
        if (res.data.code === 200) {
          file.minioID = res.data.data.split(":")[0];
          file.filename = file.name;
          this.upload.uploadFiles_byzs = filelist;
        } else {
          this.$message.error({ content: '上传失败!', placement: 'center' })
          filelist.splice(filelist.indexOf(file), 1);
          this.upload.uploadFiles_byzs = filelist;
        }
      })
      .catch(() => { 
        this.$message.error({ content: '上传失败!', placement: 'center' });
        filelist.splice(filelist.indexOf(file), 1);
        this.upload["uploadFiles_" + name] = filelist;
      });
    },
    //上传文件删除前事件
    handleUploadBeforeRemove_byzs(file, filelist) {
      if (file.fileid && file.fjid) {
        return this.$modal.confirm("该文件已上传，确认删除该文件？");
      } else {
        return true;
      }
    },
    //上传文件删除事件
    handleUploadRemove_byzs(file, filelist) {
      this.upload.uploadFiles = filelist;

      if (file.fileid && file.fjid) {
        submit_delfile_byzs({ fileid: file.fileid, id: file.id})
        .then((res) => {
          if (res.success) {
            this.$message.success({ content: '删除成功!', placement: 'center' })
          } else {
            this.$message.error({ content: '删除失败!', placement: 'center' })
          }
        })
        .catch(() => { 
          this.$message.error({ content: '删除失败!', placement: 'center' })
        });
      }
    },
    test() {
      alert(JSON.stringify(this.formData));
    }
      
  },
})
</script>
<style lang="less" scoped>
.app-container {
  height: 100%;

  .el-table {
    overflow: scroll;
  }
}

::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}

/deep/ .is-left > div {
    text-align: left;
}

/deep/ .is-right > div {
    text-align: right;
}

/deep/ .is-left > div {
    text-align: left;
}

/deep/ .is-center > div {
    text-align: center;
}

::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-textarea__inner,
::v-deep .el-radio.is-disabled .el-radio__inner,
::v-deep .el-radio.is-disabled .el-radio__label,
::v-deep .el-checkbox.is-disabled .el-checkbox__inner,
::v-deep .el-checkbox.is-disabled .el-checkbox__label {
  background-color: #f6f6f6 !important; /* 示例：改变背景颜色 */
  color: #333 !important; /* 示例：改变文字颜色 */
}

::v-deep .el-upload.el-upload--text {
  margin :0 !important;
}

.dialog-footer {
  text-align: center;
}

.mainSearchPanel .page-header-title {
  font-size:16px;
  color: #409EFF;
  font-weight: bolder;
  display: block;
  margin:0;
  padding:0;
  margin:10px 0;
}

.mainSearchPanel .el-divider--horizontal {
  margin:0 !important;
  margin-top:10px;
}

</style>
